<template>
    <div class="container">
        <div class="tabpane" > 
                <ul class="ulBox" :style="{width:dataTypeList.length*200+'px'}">
                    <li class="tabItem" v-for="(value,key,index) in dataTypeList" :key="index" @click="handleClick(val,index,key)" :class="currt==index?'activeItem':''">
                        {{key}}
                    </li>
                </ul>
            </div>
        <div
            class="table">
            <el-table
                v-loading="loading"
                :data="deviceList"
                @selection-change="handleSelectionChange"
                :header-cell-style="{background:'#DADDE9',color:'#000',height:'44px'}"
                max-height="650">
                <el-table-column
                    label="地块编号"
                    prop="siteCode"
                    width="120"
                    align="center"
                    sortable
                />
                <el-table-column
                    label="地块名称"
                    prop="siteName"
                    :show-overflow-tooltip="true"
                    align="center"
                    width="150"
                />
                <el-table-column
                    label="地块行业类型"
                    :show-overflow-tooltip="true"
                    prop="siteType"
                    width="250"
                    align="center"
                />
                <el-table-column
                    label="地块面积"
                    :show-overflow-tooltip="true"
                    prop="siteArea"
                    width="200"
                    align="center"
                >
                </el-table-column>    
                <el-table-column
                    label="修复阶段"
                    :show-overflow-tooltip="true"
                    prop="sitePhase"
                    width="200"
                    align="center"
                />
                <el-table-column
                    label="场地描述"
                    prop="siteDescription"
                    align="center"
                    width="300"
                    
                >
                </el-table-column>
                <el-table-column
                    label="业主名称"
                    prop="ownerName"
                    align="center"
                    width="200"
                >
                </el-table-column>
                <el-table-column
                    label="业主社会信用代码"
                    prop="ownerCode"
                    align="center"
                    width="280"
                >
                </el-table-column>
                <el-table-column
                    label="数据提供方社会信用代码"
                    prop="dataProviderCode"
                    align="center"
                    width="280"
                >
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
import { listDevice } from "@/api/device/device";
export default {
    name: "Role",
    data() {
        return {
            //excel数据
            dataTypeList:{},
            //选中选项
            currt:0,
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 设备表格数据
            deviceList: [{

            }],
            // 显示搜索条件
            showSearch: true,
            loading: false,
            // 查询条件
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                field: "deviceName",
                keyword: undefined
            },
        };
    },
    created() {
     
    },
    methods: {
        /** 查询设备列表 */
        getList() {
            this.loading = true;
            // console.log(this.queryParams);
            listDevice(this.queryParams).then(
                response => {
                    this.deviceList = response.data;
                    this.total = response.total;
                    this.loading = false;
                }
            );
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map(item => item['deviceID'])
            this.multiple = !selection.length
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");
            this.handleQuery();
        },
      
        // 表单重置
        reset() {
            if (this.$refs.menu != undefined) {
                this.$refs.menu.setCheckedKeys([]);
            }
            this.menuExpand = false,
                this.menuNodeAll = false,
                this.deptExpand = true,
                this.deptNodeAll = false,
                this.form = {
                    parameter:[{
                            "paramName": "",
                            "paramValue": ""
                                }],
                    deviceID: undefined,
                    diviceNumber:undefined,
                    diviceTime:undefined,
                    deviceName: undefined,
                    deviceType: undefined,
                    company: undefined,
                    createName:undefined,
                    note:undefined,
                };
            this.resetForm("form");
        },
        /** 新增按钮操作 */
        handleAdd() {
            this.reset();
            this.open = true;
            this.title = "添加设备";
        },
        //tab点击
        handleClick(val,index,key){
            this.currt=index
        }
    }
}
</script>
<style scoped lang="scss" >
.table{
    /deep/ .is-leaf{
    height: 30px !important;
    padding: 0px !important;
}
}
.tabpane{
    background: rgb(218, 221, 233);
    overflow-x: auto;
    .ulBox {
    display: block;
    overflow-x: auto;
    .tabItem{
        list-style-type:none;
        display: inline-block;
        padding:2px 10px;
        font-size: 16px;
        border-radius:2px ;
        width: 200px;
    }
    .tabItem:hover{
        cursor: pointer;
    }
    .activeItem{
        color: #fff;
        background: #3066FF;
    }
    }
} 
</style>

